<template>
   <div class="main">
      <!-- this.film什么时候得到数据，div才什么时候被渲染 -->
      <div
         class="film"
         v-if="film"
         data-enter-time="1669334989">
         <!-- header -->
         <div class="film-header show-film-header">
            <div
               class="goBack"
               @click="$router.back">
               <img
                  src=""
                  alt="" />
            </div>
            <div
               class="title"
               ref="refTitle">
               {{ film.name }}
            </div>
            <!---->
         </div>

         <!-- poster -->
         <div
            data-v-21c202bd=""
            class="lazy-img film-poster"
            alt="filmPoster"
            style="width: 100%; background: rgb(249, 249, 249)">
            <div
               data-v-21c202bd=""
               class="padding"
               style="width: 100%; background: rgb(249, 249, 249)">
               <img
                  data-v-21c202bd=""
                  :src="film.poster"
                  width="64px"
                  alt="img" />
            </div>
            <div
               data-v-21c202bd=""
               class="lazy-img-wrap"
               style="width: 100%; background: rgb(249, 249, 249); opacity: 1; display: block">
               <img
                  data-v-21c202bd=""
                  :src="film.poster"
                  class="target-img" />
            </div>
         </div>

         <!-- detail -->
         <div class="film-detail">
            <div class="col">
               <div class="film-name">
                  <span class="name">{{ film.name }}</span
                  ><span class="item">{{ film.filmType.name }}</span>
               </div>
               <div class="film-grade">
                  <span class="grade">{{ film.grade }}</span
                  ><span class="grade-text">分</span>
               </div>
            </div>
            <div class="film-category grey-text">{{ film.category }}</div>
            <div class="film-premiere-time grey-text">
               {{ new Date(1669334400 * 1000).toLocaleDateString().replaceAll("/", "-") }}上映
            </div>
            <div class="film-nation-runtime grey-text">
               {{ film.nation }} | {{ film.runtime }}分钟
            </div>
            <div class="test grey-text">{{ film.synopsis }}</div>

            <!-- 摘要文字 -->
            <div
               id="synopsis"
               class="film-synopsis grey-text"
               :class="{ hidde: hideSynopsis }"
               :style="{
                  height: hideSynopsis ? '60px' : `${Math.ceil(film.synopsis.length / 28) * 18}px`,
               }">
               {{ film.synopsis }}
            </div>

            <div
               class="toggle"
               @click="toggleSynopsisHide">
               <i
                  v-if="hideSynopsis"
                  class="fa fa-angle-down"
                  style="font-size: 20px"></i>
               <i
                  v-else
                  class="fa fa-angle-up"
                  style="font-size: 20px"></i>
            </div>
         </div>

         <!-- actors -->
         <div class="actors">
            <div class="actors-title-bar">
               <span class="actors-title-text">演职人员</span>
            </div>

            <div
               data-v-2d80f9ec=""
               class="row-scroll-wrapper actors-list"
               style="height: 140px; background: rgb(255, 255, 255)">
               <!-- 演职人员图片列表 -->
               <ul
                  data-v-2d80f9ec=""
                  class="row-scroll-items-nav">
                  <li
                     v-for="actor in film.actors"
                     data-v-624f798e=""
                     class="row-scroll-item"
                     data-v-2d80f9ec=""
                     style="width: 85px; min-width: 85px">
                     <div
                        data-v-624f798e=""
                        class="actors-item"
                        style="text-align: center">
                        <div
                           data-v-21c202bd=""
                           class="lazy-img actors-img"
                           data-v-624f798e=""
                           style="width: 85px; height: 85px; background: rgb(249, 249, 249)">
                           <div
                              data-v-21c202bd=""
                              class="padding"
                              style="width: 85px; height: 85px; background: rgb(249, 249, 249)">
                              <img
                                 data-v-21c202bd=""
                                 src="/imgs/maizuo_padding.7c6a7f11.png"
                                 width="64px"
                                 alt="img" />
                           </div>
                           <div
                              data-v-21c202bd=""
                              class="lazy-img-wrap"
                              style="
                                 width: 85px;
                                 height: 85px;
                                 background: rgb(249, 249, 249);
                                 opacity: 1;
                                 display: block;
                              ">
                              <img
                                 data-v-21c202bd=""
                                 :src="actor.avatarAddress"
                                 class="target-img" />
                           </div>
                        </div>
                        <span
                           data-v-624f798e=""
                           class="actors-name"
                           >{{ actor.name }}</span
                        ><span
                           data-v-624f798e=""
                           class="actors-role"
                           >{{ actor.role }}</span
                        >
                     </div>
                  </li>

                  <li
                     data-v-2d80f9ec=""
                     class="padding-right-li"></li>
               </ul>
            </div>
         </div>

         <!-- photos -->
         <div class="photos">
            <div class="photos-title-bar">
               <span class="photos-title-text">剧照</span
               ><span class="photos-to-all"
                  >全部({{ film.photos.length }})<i
                     class="iconfont icon-quanju_liebiaojiantou"
                     style="font-size: 13px"></i
               ></span>
            </div>
            <div
               data-v-2d80f9ec=""
               class="row-scroll-wrapper photos-list"
               style="height: 115px; background: rgb(255, 255, 255)">
               <ul
                  data-v-2d80f9ec=""
                  class="row-scroll-items-nav">
                  <!-- 渲染剧照列表 -->
                  <li
                     v-for="url in film.photos"
                     data-v-624f798e=""
                     class="row-scroll-item photos-item-wrap"
                     data-v-2d80f9ec=""
                     style="width: 150px; min-width: 150px">
                     <div
                        data-v-624f798e=""
                        class="photos-item">
                        <div
                           data-v-21c202bd=""
                           class="lazy-img photos-img"
                           data-v-624f798e=""
                           style="width: 150px; height: 100px; background: rgb(249, 249, 249)">
                           <div
                              data-v-21c202bd=""
                              class="padding"
                              style="width: 150px; height: 100px; background: rgb(249, 249, 249)">
                              <img
                                 data-v-21c202bd=""
                                 src="/imgs/maizuo_padding.7c6a7f11.png"
                                 width="64px"
                                 alt="img" />
                           </div>
                           <div
                              data-v-21c202bd=""
                              class="lazy-img-wrap"
                              style="
                                 width: 150px;
                                 height: 100px;
                                 background: rgb(249, 249, 249);
                                 opacity: 1;
                                 display: block;
                              ">
                              <img
                                 data-v-21c202bd=""
                                 :src="url"
                                 class="target-img" />
                           </div>
                        </div>
                     </div>
                  </li>

                  <li
                     data-v-2d80f9ec=""
                     class="padding-right-li"></li>
               </ul>
            </div>
         </div>

         <!-- <a
        href="https://m.maizuo.com/v5/#/film/6150/cinemas"
        class=""
        style="height: 49px; position: fixed; bottom: 0px; width: 100%"
        ><div class="goSchedule">选座购票</div></a
      > -->
         <div style="color: white">
            <van-button
               id="btnBuy"
               color="#ff5f16"
               type="primary"
               block
               >选座购票
            </van-button>

            <!----><!---->
         </div>
      </div>

      <!-- 无内容时显示Loading -->
      <div v-else>Loading...</div>
   </div>
</template>

<script>
import { getFilmDetail } from "@api/movieApi";

export default {
   data() {
      return {
         film: null,
         domTitle: null,
         hideSynopsis: true,
      };
   },

   mounted() {
      getFilmDetail(this.$route.params.id).then(res => {
         console.log("res=", res);
         this.film = res.data.film;
         console.log("this.film=", this.film);

         /* 数据驱动视图渲染完毕时 回调nextTick中的函数 */
         this.$nextTick(() => {
            this.domTitle = this.$refs.refTitle;
            console.log("this.domTitle", this.domTitle);

            window.addEventListener("scroll", e => {
               console.log("scroll");
               console.log(document.documentElement.scrollTop);

               if (document.documentElement.scrollTop > 50) {
                  this.domTitle.style.backgroundColor = "white";
                  this.domTitle.style.color = "#333";
               } else {
                  this.domTitle.style.backgroundColor = "transparent";
                  this.domTitle.style.color = "transparent";
               }
            });
         });
      });
   },

   methods: {
      toggleSynopsisHide() {
         this.hideSynopsis = !this.hideSynopsis;
      },
   },
};
</script>

<style lang="scss" scoped>
@import "@assets/css/chunk-vendors.e5c27244.css";
@import "@assets/css/index.5406c541.css";
@import "@assets/css/chunk-1efea0e5.6d28a156.css";
@import "@assets/css/chunk-3ec83774.b2648776.css";
@import "@assets/css/chunk-c244aaae.be010052.css";
@import "@assets/css/chunk-25310e43.19e5160a.css";

@import "./detail.css";

.title {
   text-align: center;
   padding: 0;
   background-color: transparent;
   transition: all 0.5s ease;
   color: transparent;
}

.film .actors .actors-name {
   height: 28px;
}

.film .show-film-header {
   background-color: transparent;
}

.film .show-film-header[data-v-cd580d63]:after {
   border-bottom: none;
}

#synopsis {
   transition: all 0.5s linear;
   overflow: hidden;
}

.btnBuy {
   color: white;
}
</style>
